import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [{
        path: '/',
        name: 'Home',
        component: () => import('$views/home/Home')
    },
    {
        path: '/archives',
        name: 'Archives',
        component: () => import('$views/archives/Archives')
    },
    {
        path: '/tags',
        name: 'Tags',
        component: () => import('$views/tags/Tags')
    },
    {
        path: '/categories',
        name: 'Categories',
        component: () => import('$views/categories/Categories')
    },
    {
        path: '/:menuName/:label',
        name: 'PublicPage',
        component: () => import('$components/PublicPage')
    },
    {
        path: '/message',
        name: 'Message',
        component: () => import('$views/message/Message')
    },
    {
        path: '/link',
        name: 'Link',
        component: () => import('$views/link/Link')
    },
    {
        path: '/about',
        name: 'About',
        component: () => import('$views/about/About')
    },
    {
        path: '/articleDetail',
        name: 'ArticleDetail',
        component: () => import('$views/articleDetail/ArticleDetail')
    },
    {
        path: "/404",
        name: "PageNotFound",
        component: () => import('$views/error/404')
    },
    {
        path: "*",
        redirect: "/404"
    }
]

const router = new VueRouter({
    mode: 'history',
    base: process.env.BASE_URL,
    routes,
    scrollBehavior(to, from, savedPosition) {
        // 如果你的链接是带 # 这种
        // to.hash 就会有值(值就是链接)
        // 例如 #3
        if (to.hash) {
            return {
                // 例如你按下 #3 的链接，就会变成 querySelector('#3')，自然会找到 id = 3 的元素
                selector: to.hash
            }
        }
    }
})

export default router
